$(function() {
    //接收接口的所有参数(初始化搜索接口所需参数)
    let params = {
        key: '', //搜索关键词，可以为空，为空返回某类型所有文章
        type: '', //文章类型id，可以为空，为空返回所有类型文章
        state: '', //文章状态，草稿 ，已发布,为空返回所有状态文章
        page: 1, //	当前页，为空返回第1页
        perpage: 10 //每页显示条数，为空默认每页6条
    }

    // 封装函数，方便后续增删改查的使用时方便调用来局部刷新页面
    function getList() {
        $.ajax({
            type: 'get',
            url: '/admin/article/query',
            // 根据接口文档发现data的所有参数可以为空，为空获取所有的参数
            // 因此把所有的参数封装成一个对象来接收，方便下面调用函数时可以利用对象的方法来修改值
            data: params,
            success: (backData) => {
                console.log(backData);
                //调用模板引擎
                let articleRes = template('articleTemp', backData);
                // 把模板引擎渲染到页面
                $('tbody').html(articleRes);
                // 一加入页面就调用分页器显示分页
                // 获取数据总条数(利用实参传入)；
                console.log(backData.data.totalCount);
                let totalCount = backData.data.totalCount;
                // 调用分页器(首次加载)
                layPager(totalCount);
            },
        })
    };
    // 1.0 获取文章列表
    getList();

    // 发送ajax请求获取所有类别( // 2.0 动态获取类别列表)
    $.ajax({
        type: 'get',
        url: '/admin/category/list',
        success: (backData) => {
            console.log(backData);
            // 调用模板
            let categoryRes = template('categoryTemp', backData);
            // 渲染模板
            $('#selCategory').html(categoryRes)
        },
    });

    // 3.0 点击筛选按钮
    $('#btnSearch').on('click', function(e) {
        // 3.1 阻止表单默认提交行为
        e.preventDefault();
        // 3.2 更新搜索接口所需的参数
        params.key = $('#aname').val().trim();
        params.type = $('#selCategory').val();
        params.state = $('#selStatus').val();
        // 点击筛选按钮,页码重置为第一页
        params.page = 1;
        // 3.3 重新获取文章列表
        getList();

    });
    // 重置按钮
    $('.btn_reset').on('click', function() {
        $('#aname').val('');
        // 根据接口文档和状态下拉框知道value值为空是所有状态
        $('#selCategory').val('');
        $('#selStatus').val('');
        // 调用筛选按重新获取文章列表
        $('#btnSearch').trigger('click')
    });

    // 分页器切换页面
    function layPager(totalCount) {
        layui.use('laypage', function() {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'pager', //注意，这里的 pager 是 ID，不用加 # 号，在html页面引入
                limit: params.perpage, //每页显示的条数(与接口参数一样),页容量
                curr: params.page, //点击当前页面高亮显示
                count: totalCount, //数据总数，从服务端得到
                // jump - 切换分页的回调
                // 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
                jump: function(obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    params.page = obj.curr;
                    //首次不执行
                    if (!first) {
                        // 首次不执行
                        // 否则每次点击分页就会调用函数，函数进入之后又会调用分页器而进入死循环
                        getList();
                    }
                }
            });
        });
    };

    // 5.0 删除文章
    $('tbody').on('click', '.delete', function() {
        // 5.1 获取删除按钮的 id
        let id = $(this).attr('data-id');
        // 5.2 弹出层 - 询问框
        layer.confirm('是否确定删除？', function(index) {
            // 发送请求删除文章
            $.ajax({
                type: 'post',
                url: '/admin/article/delete',
                data: { id },
                success: (backData) => {
                    console.log(backData)
                        // 轻提示
                    layer.msg(backData.msg)
                        // 重新获取列表
                    getList();
                },
            });
            // 关闭当前的询问框
            layer.close(index)
        })
    })

})